<template>
  <div class="maintain-layout">
    <snackbar style-color="#4A4A4A"
              back-color="#FAFAFA"
              status-color="#FAFAFA"
              style="background: #FAFAFA !important"
              rightText="搜索"
              :fixed="true">
    </snackbar>
    <div class="otherCosts">
      <div  class="ot">
        <div class="ot-one">
          <div class="inputData-bodey-nei"><span>碧桂园</span></div>
          <div class="inputData-bodey-xuan"><span>详情<img class="icon-go" src="@/assets/image/icon_right.png"></span>
          </div>
        </div>
        <div class="ot-two">
          <span>中标价</span>
          <span>¥ 1,000,000</span>
        </div>
        <div class="ot-three">
          <span>总成本</span>
          <span>¥ 600,000</span>
          <span>利润</span>
          <span>¥ 600,000</span>
        </div>
        <div class="hengxian"></div>
        <div class="ot-four">
          <span  >汽车：</span>
          <span>¥ 400,000</span>
        </div>
        <div class="ot-four">
          <span>机械成本：</span>
          <span>¥ 400,000</span>
          <span><img class="icon-go" src="@/assets/image/icon_right.png"></span>
        </div>
        <div class="ot-four">
          <span>维修成本：</span>
          <span>¥ 10,000</span>
          <span><img class="icon-go" src="@/assets/image/icon_right.png"></span>
        </div>
        <div class="ot-four">
          <span>司机成本：</span>
          <span>¥ 50,000</span>
          <span><img class="icon-go" src="@/assets/image/icon_right.png"></span>
        </div>
        <div class="ot-four">
          <span>管理成本：</span>
          <span>¥ 4,000</span>
          <span><img class="icon-go" src="@/assets/image/icon_right.png"></span>
        </div>

        <div class="ot-four">
          <span>其他成本：</span>
          <span>¥ 0</span>
          <span><img class="icon-go" src="@/assets/image/icon_right.png"></span>
        </div>
      </div>
    </div>
    <span class="admin" >管理成本按比例计算</span>
    <div class="bottom-layout">
      <span class="add-btn">项目情况</span>
      <span class="add-span">|</span>
      <span class="add-span">|</span>
    </div>

  </div>
</template>

<script>
export default {
  name: 'projectDetails',
  data() {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
.maintain-layout {
  width: 100%;
  height: 100vh;
  background: #F6F6F6;

  .top-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid rgba(219, 219, 219, 0.5);
    width: 100vw;
    background-color: #FAFAFA;

  }

  .otherCosts {
    width: 100%;

    .ot {
      width: 94%;
      height: 75vh;
      background: #FFFFFF;
      box-shadow: 0px 0px 6px 1px rgba(121, 121, 121, 0.3);
      border-radius: 4px;
      border: 0px solid rgba(222, 222, 222, 0.31);
      display: flex;
      flex-direction: column;
      margin: 20px auto 0 auto;

      .ot-one {
        width: 94%;
        height: 10vh;
        margin-left: 3%;
        display: flex;
        align-items: center;
        position: relative;

        .inputData-bodey-nei {
          width: 30%;
          height: 4vh;
          line-height: 4vh;
          text-align: center;
          background: #65C368;
          color: #FFFFFF;
          border-radius: 2px;
          font-family: "苹方-简 中黑体"
        }

        .inputData-bodey-xuan {
          width: 20%;
          height: 4vh;
          line-height: 4vh;
          text-align: center;
          color: #333333;
          border-radius: 2px;
          position: absolute;
          right: 0;

          span {
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        span {
          font-size: 0.4rem;
        }

        .icon-go {
          width: 20px;
          height: 20px;
        }

      }

      .ot-two {
        font-size: 0.4rem;


        span:nth-child(1) {
          margin-left: 8%;
          color: #B4B4B4;
        }
        span:nth-child(2) {
          margin-left: 5%;
        }

      }

      .ot-three {
        margin-top: 18px;
        font-size: 0.4rem;



        span:nth-child(1) {
          margin-left: 8%;
          color: #B4B4B4;
        }
        span:nth-child(2) {
          margin-left: 5%;
        }

        span:nth-child(3) {
          margin-left: 8%;
          color: #B4B4B4;
        }
        span:nth-child(4) {
          margin-left: 5%;
        }

      }

      .ot-four {
        //margin-top: 18px;
        width: 94%;
        height: 7vh;
        font-size: 0.4rem;
        margin: 0 auto;
        span:nth-child(1) {
          display: inline-block;
          width: 70px;
          height: 3vh;
          margin-left: 5%;
          //background: #00a2ff;
          text-align: right;
          color: #B4B4B4;
        }

        span:nth-child(3) {
          float: right;
          margin-right: 15px;
          .icon-go {
            width: 20px;
            height: 20px;
          }
          //color: #B4B4B4;
        }
      }

      .hengxian {
        width: 94%;
        //margin-right: 14px;
        height: 1px;
        background-color: rgba(201, 201, 201, 0.5);
        margin: 30px auto;
      }
    }


    .other {
      width: 322px;
      height: 17vh;
      background: #FFFFFF;
      box-shadow: 0px 0px 6px 1px rgba(121, 121, 121, 0.3);
      border-radius: 4px;
      border: 0px solid rgba(222, 222, 222, 0.31);
      display: flex;
      flex-direction: column;
      margin: 20px auto;
      color: #B4B4B4;
      font-size: 0.4rem;

      .hengxian {
        width: 94%;
        //margin-right: 14px;
        height: 1px;
        background-color: rgba(201, 201, 201, 0.5);
        margin: 8px auto;
      }

      .details {
        width: 15%;
        height: 3vh;
        line-height: 3vh;
        background: #FFFFFF;
        display: inline-block;
        color: #65C368;
        border-radius: 3px;
        border: 1px solid #65C368;
        text-align: center;
        font-size: 0.4rem;
        margin-left: 80%;
      }



    }


  }

  .admin {
    display: inline-block;
    font-size: 0.4rem;
    color: #D0021B;

    margin-left: 8%;
    margin-top: 10px;
  }

  .bottom-layout {
    position: fixed;
    bottom: 0px;
    width: 100vw;
    height: 8vh;
    display: flex;
    flex-direction: row;

    span {
      flex: 1;
      height: 8vh;
      background: #FFFFFF;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-size: 0.4rem;
      color: #28C1C6;
    }

    .add-btn {

    }

    .add-span {
      justify-content: left;
    }
  }


}
</style>
